﻿@page "/components/tooltip"

<DocsPage>
    <DocsPageHeader Title="Tooltip"/>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Simple Tooltips">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="TooltipSimpleExample">
                <TooltipSimpleExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Arrow Tooltips">
                <Description>The tooltip can display arrows pointing to its activator, set the <CodeInline>Arrow</CodeInline> property to true to show them.</Description>
            </SectionHeader>
            <SectionContent Code="TooltipArrowExample" ShowCode="false">
                <TooltipArrowExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Colored Tooltips">
                <Description>Tooltips can be displayed in different colors with the <CodeInline>Color</CodeInline> property.</Description>
            </SectionHeader>
            <SectionContent Code="TooltipColorExample">
                <TooltipColorExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="HTML Tooltips">
                <Description>With the <CodeInline>TooltipContent</CodeInline> render fragment, you can specify custom HTML content for your tooltip.</Description>
            </SectionHeader>
            <SectionContent Code="TooltipHtmlExample">
                <TooltipHtmlExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Transitions">
                <Description>The tooltip's default delay can be set with <CodeInline>Delay</CodeInline> as a double in milliseconds.</Description>
            </SectionHeader>
            <SectionContent Code="TooltipTransitionsExample" ShowCode="false">
                <TooltipTransitionsExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
